<template>
    <div class="shop-header">
        <img :src="shop.image" class="shop-logo" alt="商铺LOGO" />
        <div class="shop-info">
            <div class="shop-title-row">
                <h1 class="shop-name">{{ shop.name }}</h1>
            </div>
            <div class="shop-meta">
                <span class="shop-score">
                    <StarRating :score="shop.score || 0" />
                    <span class="comments">（{{ shop.comments || 0 }}条评价）</span>
                </span>
                <span class="shop-sold">月售：{{ shop.sold || 0 }}</span>
                <span class="shop-price">人均：￥{{ shop.averagePrice || '-' }}</span>
            </div>
            <div class="shop-contact">
                <span>电话：{{ shop.phone }}</span>
                <span>邮箱：{{ shop.email }}</span>
            </div>
            <div class="shop-address">
                <span>地址：{{ shop.address }}（{{ shop.area }}）</span>
                <span>营业时间：{{ shop.openHours }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import StarRating from '@/components/shop/StarRating.vue'
// shop 作为props传入
const props = defineProps({
    shop: {
        type: Object,
        required: true
    }
})
</script>

<style scoped>
.shop-header {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: 32px 40px;
    gap: 32px;
    margin-bottom: 24px;
}
.shop-logo {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #f0f0f0;
}
.shop-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.shop-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.shop-name {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin: 0;
}
.shop-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 15px;
    color: #666;
}
.shop-score {
    display: flex;
    align-items: center;
    gap: 6px;
}
.score-num {
    color: #ff4d4f;
    font-weight: bold;
}
.comments {
    color: #bbb;
    font-size: 13px;
}
.shop-sold, .shop-price {
    color: #888;
}
.shop-contact, .shop-address {
    font-size: 14px;
    color: #888;
    display: flex;
    gap: 32px;
}
</style>
